<template>
	<view class="add_address">
		<!-- #ifndef H5 -->
		<topTitle :styles="{back:true,title:'新增地址',color:'#fff'}" />
		<!-- #endif -->
		<view class="form">
			<view class="name">
				<text>联系人:</text>
				<input v-model="name" type="text" placeholder="请输入姓名">
			</view>
			<view class="tel">
				<text>手机号:</text>
				<input v-model="phone" maxlength="11" @blur="changeTel" type="text" placeholder="请输入手机号">
			</view>
			<view class="address">
				<text>服务地址:</text>
				<view class="chex_address">
					<view class="map" @click="getAddress">
						<uni-icons type="location" size="20" color="#25D989"></uni-icons>
						<text>{{address.name}}</text>
					</view>
					<uni-icons type="right" size="12"></uni-icons>
				</view>
			</view>
			<view class="card_number">
				<text>门牌号:</text>
				<input v-model="detail" type="text" placeholder="某酒店xx房间(某小区XX房）">
			</view>
		</view>
		<view class="submit" @click="submit">
			保存
		</view>
	</view>
</template>

<script>
	import topTitle from "@/components/topTitle.vue"
	export default {
		components:{
			topTitle
		},
		data() {
			return {
				name:"",
				phone:"",
				detail:"",
				address:{
					name:'点击选择您的地址',
					latitude:'',
					longitude:'',
				},
				edit:false,		//是否为编辑
				addressId:'',	//所编辑地址的id
				pay_add:false,	//是否从下单跳转过来
				jumpType:''
			};
		},
		onLoad(options) {
			console.log(options)
			if(options.type){
				this.jumpType = 'type'
			}else if(options.addType){
				this.jumpType = 'addType'
			}
			if(options.type== 'pay_add' || options.addType == 'pay_add'){
				this.pay_add = true;
			}
			if(options.type && options.data){
				this.edit = true;
				let data = JSON.parse(options.data)
				this.addressId = data.id
				this.name = data.name;
				this.phone = data.phone
				this.address = {
					name:data.province + data.city + data.district + data.detail,
					latitude:data.latitude,
					longitude:data.longitude,
					province:data.province,
					city:data.city,
					district:data.district,
					detail:data.detail
				}
				this.detail = data.house_number
			}else{
				let userInfo = JSON.parse(uni.getStorageSync('userInfo'))
				this.name = userInfo.nickname
				this.phone = userInfo.real_phone
			}
		},
		methods:{
			changeTel(){
				// let reg = /^1(3[0-9]|5[0-3,5-9]|7[1-3,5-8]|8[0-9])\d{8}$/
				// let reg = /^1(3[0-9]|4[01456879]|5[0-3,5-9]|6[2567]|7[0-8]|8[0-9]|9[0-3,5-9])\d{8}$/
				console.log(reg.test(this.phone),'---------------123123123')
				// if(!reg.test(this.phone)){
				// 	uni.showToast({
				// 		title:'请输入正确的手机号码',
				// 		icon:'none'
				// 	})
				// 	return false;
				// }
			},
			//获取地址
			getAddress(){
				uni.chooseLocation({
					success:res=>{
						console.log(res,'--------------res')
						var address = ""
						if(res.address.indexOf(res.name) == -1){
							address = res.address +res.name
						}else{
							address = res.address
						}
						this.address = {
							name:address,
							latitude:res.latitude,
							longitude:res.longitude,
							address:res.address,
							detail:res.name
						}
						console.log(res.address,'-------------------------地址')
						var that = this;
						let url = `https://apis.map.qq.com/ws/geocoder/v1/?address=`
						this.$jsonp(url,{
							key:'QB3BZ-OTMRD-VTN4B-HOE6U-7IOZ6-AVFX4',
							address:res.address,
							output:'jsonp'
						}).then(res=>{
							if(res.status == 0){
								let region = res.result.address_components
								that.address.province = region.province
								that.address.city =region.city
								that.address.district =region.district
							}
						})
						// uni.request({
						// 	url:`https://apis.map.qq.com/ws/geocoder/v1/?location=${res.latitude,res.longitude}&key=QB3BZ-OTMRD-VTN4B-HOE6U-7IOZ6-AVFX4&output=JSONP`,
						// 	method:'get',
						// 	success:result=>{
						// 		console.log(result,'------------------------腾讯地图')
						// 	}
						// })
					}
				})
			},
			//提交保存
			submit(){
				if(this.name == ''){
					uni.showToast({
						title:'请输入姓名',
						icon:"none"
					})
					return false;
				}
				if(this.phone == ''){
					uni.showToast({
						title:'请输入手机号',
						icon:"none"
					})
					return false;
				}
				if(this.detail == ''){
					uni.showToast({
						title:'请输入门牌号码',
						icon:"none"
					})
					return false;
				}
				if(this.address.longitude == ''){
					let text = '';
					if(this.edit){
						text = '请重新选择地理位置'
					}else{
						text = '请选择地理位置'
					}
					uni.showToast({
						title:text,
						icon:"none"
					})
					return false;
				}
				// let reg = /^1(3[0-9]|4[0-9]|5[0-3,5-9]|6[0-9]|7[1-3,5-8]|8[0-9]|9[1-9])\d{8}$/
				// let reg = /^1(3[0-9]|4[01456879]|5[0-3,5-9]|6[2567]|7[0-8]|8[0-9]|9[0-3,5-9])\d{8}$/ 
				// if(!reg.test(this.phone)){
				// 	uni.showToast({
				// 		title:'请输入正确的手机号码',
				// 		icon:'none'
				// 	})
				// 	return false;
				// }
				let data = {
					name:this.name,
					phone:this.phone,
					detail:this.address.detail,
					province:this.address.province,
					city:this.address.city,
					district:this.address.district,
					longitude:this.address.longitude,
					latitude:this.address.latitude,
					is_default:this.address.is_default?this.address.is_default:0,
					house_number:this.detail
				}
				console.log(data,'----------------------data')
				let url = '';
				if(this.edit){
					url = `/api/address/edit/${this.addressId}`
				}else{
					url = '/api/address/add'
				}
				this.$http({
					url:url,
					method:'post',
					data:data,
					success:result=>{
						console.log(result)
						if(result.code == 200){
							uni.showToast({
								title:'添加成功',
								success:()=> {
									if(this.pay_add){
										console.log('123123123123',result,'**********************')
										let pages = getCurrentPages()
										console.log(result,'---------------123')
										let nowPage =  pages[pages.length -1]
										let prevPage = null;
										let delte = 1;
										if(this.jumpType == 'addType'){
											prevPage = pages[pages.length-3]
											delte = 2;
										}else{
											prevPage = pages[pages.length-2]
											delte = 1
										}
										
										prevPage.$vm.address = result.data.info
										setTimeout(()=>{
											uni.navigateBack({
												delta:delte,
												animationType: 'pop-out',
												animationDuration: 200,
											})
										},1500)
									}else{
										setTimeout(()=>{
											uni.navigateBack()
										},1500)
									}
								}
							})
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		width: 100%;
		height: 100%;
	}
	.add_address{
		width: 100%;
		height: 100%;
		.form{
			margin: 18px 12px;
			background-color: #fff;
			border-radius: 8px;
			padding: 0 22px;
			>view{
				display: flex;
				align-items: center;
				padding: 13px 0;
				>text{
					width: 80px;
					font-size: 16px;
					color: #707070;
				}
				>input{
					text-indent: 5px;
					flex: 1;
				}
				.chex_address{
					flex: 1;
					display: flex;
					justify-content: space-between;
					align-items: center;
					.map{
						color: #808080;
					}
					.uniui-right{
						font-weight: bold;
					}
				}
			}
		}
		.submit{
			    margin: 10px 9px;
			    height: 44px;
			    line-height: 44px;
			    background: #24D576;
			    border-radius: 18px;
			    color: #fff;
			    font-size: 22px;
			    text-align: center;
			    font-weight: bold;
		}
	}
</style>
